<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="robots" content="all,follow">
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" href="../static/vendor/bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome CSS-->
    <link rel="stylesheet" href="../static/vendor/font-awesome/css/font-awesome.min.css">
    <!-- Fontastic Custom icon font-->
    <link rel="stylesheet" href="../static/css/fontastic.css">
    <!-- Google fonts - Poppins -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,700">
    <!-- theme stylesheet-->
    <link rel="stylesheet" href="../static/css/style.default.css" id="theme-stylesheet">
    <!-- Custom stylesheet - for your changes-->
    <link rel="stylesheet" href="../static/css/custom.css">
    <!-- Favicon-->
    <link rel="shortcut icon" href="../static/images/favicon.ico">
    <!-- Tweaks for older IEs--><!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->

    <script th:inline="javascript" th:fragment="header_js">
        // 入口函数, 展示铃铛效果
        $(function(){

            $.ajax({
                url: "/user_image",
                type: 'POST',
                contentType: "json",
                success: function (data) {
                    $("#user_image").prop("src", '/images/user_images/'+data);
                }
            });

            $("#check").click(function () {
                $.ajax({
                    url: "/check_work",
                    type: 'POST',
                    contentType: "json",
                    success: function (data) {
                        alert(data);
                    }
                });
            });
            // 当前页面信息 改变sidebar的active
            if(window.location.pathname == "/back_index") {
                $("#back_index_active").addClass("active");
                $("#back_operate_active").removeClass("active");
                $("#back_operate_order").removeClass("active");
                $("#back_operate_charts").removeClass("active");
                $("#back_setting_active").removeClass("active");
            } else if(window.location.pathname == "/back_order") {
                $("#back_index_active").removeClass("active");
                $("#back_operate_active").removeClass("active");
                $("#back_order_active").addClass("active");
                $("#back_charts_active").removeClass("active");
                $("#back_setting_active").removeClass("active");
            } else if(window.location.pathname == "/back_operate") {
                $("#back_index_active").removeClass("active");
                $("#back_operate_active").addClass("active");
                $("#back_order_active").removeClass("active");
                $("#back_charts_active").removeClass("active");
                $("#back_setting_active").removeClass("active");
            } else if(window.location.pathname == "/back_charts") {
                $("#back_index_active").removeClass("active");
                $("#back_operate_active").removeClass("active");
                $("#back_order_active").removeClass("active");
                $("#back_charts_active").addClass("active");
                $("#back_setting_active").removeClass("active");
            } else {
                $("#back_index_active").removeClass("active");
                $("#back_operate_active").removeClass("active");
                $("#back_order_active").removeClass("active");
                $("#back_charts_active").removeClass("active");
                $("#back_setting_active").addClass("active");
            }

            // header上铃铛的ajax
            $.ajax({
                url: '/unread_order_count',
                type: 'POST',
                success: function (data) {
                    var content = "";
                    var reservations = data.header_reservations_info;
                    var minBetween = data.minBetween;
                    if ( reservations.length != 0) {
                        content += " <li class=\"nav-item dropdown\" id=\"replace_header_info\"> <a id=\"notifications\" rel=\"nofollow\" data-target=\"#\" href=\"#\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\" class=\"nav-link\"><i class=\"fa fa-bell-o\"></i><span class=\"badge bg-red badge-corner\">\n" +
                            "                        " + reservations.length + "\n" +
                            "                    </span></a>\n" +
                            "                        <ul aria-labelledby=\"notifications\" class=\"dropdown-menu\">\n" +
                            "                            <li><a rel=\"nofollow\" href=\"javascript:void(0)\" class=\"dropdown-item\" onclick='load_reservation_modal()'>\n" +
                            "                                <div class=\"notification\">\n" +
                            "                                    <div class=\"notification-content\"><i class=\"fa fa-envelope bg-green\"></i>收到了" + reservations.length + "条新的住宿预订</div>\n" +
                            "                                    <div class=\"notification-time\"><small>在" + minBetween + "分钟之前 </small></div>\n" +
                            "                                </div></a></li>\n" +
                            "                            <li><a rel=\"nofollow\" href=\"javascript:void(0)\" class=\"dropdown-item all-notifications text-center\" onclick=\" load_reservation_modal()\"> <strong>查看全部的未读预定                                            </strong></a></li>\n" +
                            "                        </ul>\n" +
                            "                    </li>"
                    } else {
                        content += " <li class=\"nav-item dropdown\" id=\"replace_header_info\"> <a id=\"notifications\" rel=\"nofollow\" data-target=\"#\" href=\"#\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\" class=\"nav-link\"><i class=\"fa fa-bell-o\"></i></a>\n" +
                            "                        <ul aria-labelledby=\"notifications\" class=\"dropdown-menu\">\n" +
                            "                            <li><a rel=\"nofollow\" href=\"#\" class=\"dropdown-item\">\n" +
                            "                                <div class=\"notification\">\n" +
                            "                                    <div class=\"notification-content\"><i class=\"fa fa-envelope bg-green\"></i> 暂无未读的住宿预订 </div>\n" +
                            "                                    <div class=\"notification-time\"><small> </small></div>\n" +
                            "                                </div></a></li>\n" +
                            "                        </ul>\n" +
                            "                    </li>"
                    }
                    $("#replace_header_info").html(content);

                    // 提示框中的内容
                    var content2 = "";
                    for(var i = 0; i < reservations.length; i ++) {
                        var po = reservations[i];

                        content2 += "<div class=\"articles card\">\n" +
                            "                    <div class=\"card-body no-padding\">\n" +
                            "                            <a data-toggle=\"collapse\" href=\"#collapse_" + po.order_id  +"\" role=\"button\" onclick=\"change_leave_message_state("+ po.order_id +")\" aria-expanded=\"false\" aria-controls=\"collapseExample\">\n" +
                            "                                <div class=\"item d-flex align-items-center\" >\n" +
                            "                                        <text>\n" +
                            '                        <h3 class=\"h5\">订单号:' + po.order_num + '</h3>\n' +
                            '                        <small> 客户姓名:' + po.user_name + '</small>\n' +
                            "                        <small> &nbsp;&nbsp;&nbsp;客户电话:" + po.user_phone + "</small>\n" +
                            "                        <small> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;客户留言:" + po.leave_message_context + "</small>\n" +
                            "                                        </text>\n" +
                            "                                </div>\n" +
                            "                            </a>\n";

                                content2 +=
                                "                            <div class=\"collapse\" id=\"collapse_" + po.order_id + "\">\n" +
                                "                                <div class=\"item d-flex align-items-center\">\n" +
                                    "                                        <text>\n" +
                                    '                        <h3 class=\"h5\">正在读取中</h3>\n' +
                                    '                        <small> 请稍做等候 </small>\n' +
                                    "                                        </text>\n" +
                                "                                </div>\n" +
                                "                            </div>\n"

                            content2 +=
                            "                    </div>\n" +
                            "                </div>"
                    }
                    $("#notification_modal_replace").html(content2);
                }
            })
        });

        // 用于触发点击信息让新的预定变成已读,并读取订单下的订单项信息
        function change_leave_message_state(order_id) {
            var this_order_id = order_id;
            $.ajax({
                url: '/update_order_messageState',
                type: 'POST',
                data: {
                    order_id: order_id
                },
                success: function (data) {
                    var content = "";
                    var reservation_items = data.reservation_orderItems;
                    // 头部信息
                          content += "                                <div class=\"item d-flex align-items-center\">\n" +
                        "                                    <table class=\"table table-borderless table-hover\">\n" +
                        "                                        <thead>\n" +
                        "                                        <tr>\n" +
                        "                                            <th scope=\"col\">#</th>\n" +
                        "                                            <th scope=\"col\">房间类型</th>\n" +
                        "                                            <th scope=\"col\">预定入住时间</th>\n" +
                        "                                            <th scope=\"col\">预定退房时间</th>\n" +
                        "                                            <th scope=\"col\">支付状态</th>\n" +
                        "                                        </tr>\n" +
                        "                                        </thead>\n"

                    for(var i = 0; i < reservation_items.length; i++ ) {
                        var po = reservation_items[i];
                        var state = "";
                        if (po.order_item_state == 0) {
                            state = "未支付"
                        } else if (po.order_item_state == 1) {
                            state = "(线上预定) 未使用"
                        } else if (po.order_item_state == 2) {
                            state = "已使用";
                        } else if (po.order_item_state == 3) {
                            state = "(线上预定) 未支付"
                        } else {
                            state = "已取消"
                        }
                        // 循环的中部信息
                        content +=
                            "                                        <tbody>\n" +
                            "                                        <tr>\n" +
                            "                                            <th scope=\"row\">"+ ( i+1 ) +"</th>\n" +
                            "                                            <td>" + po.room_type_name + "</td>\n" +
                            "                                            <td>" + po.plan_stay_time  + "</td>\n" +
                            "                                            <td>" + po.plan_leave_time +"</td>\n" +
                            "                                            <td>"+ state +"</td>\n" +
                            "                                        </tr>\n" +
                            "                                        </tbody>\n"
                    }
                    //尾部信息
                    content +=
                        "                                    </table>\n" +
                        "                                </div>\n"

                        $("#collapse_"+ this_order_id +  "").html(content);
                    }
         });
        }

        // 用于触发点击信息让所有新的预定变成已读
        function change_all_leave_message_state() {
            $.ajax({
                url: '/update_order_all_messageState',
                type: 'POST',
                success: function (data) {
                }
            });
        }


        // 展示所有新预定（未读预定）的JS function
        function load_reservation_modal() {
            $("#new_reservations_modal").modal('show');
        }

        // 更改sidebar的active形式
        function changeActive(active_id) {
            if( active_id == 1) {
                $("#back_index_active").addClass("active");
                $("#back_operate_active").removeClass("active");
                $("#back_operate_order").removeClass("active");
                $("#back_operate_charts").removeClass("active");
                $("#back_setting_active").removeClass("active");
            } else if(active_id == 2) {
                $("#back_index_active").removeClass("active");
                $("#back_operate_active").removeClass("active");
                $("#back_order_active").addClass("active");
                $("#back_charts_active").removeClass("active");
                $("#back_setting_active").removeClass("active");
            } else if( active_id == 3) {
                $("#back_index_active").removeClass("active");
                $("#back_operate_active").addClass("active");
                $("#back_order_active").removeClass("active");
                $("#back_charts_active").removeClass("active");
                $("#back_setting_active").removeClass("active");
            } else if( active_id == 4) {
                $("#back_index_active").removeClass("active");
                $("#back_operate_active").removeClass("active");
                $("#back_order_active").removeClass("active");
                $("#back_charts_active").addClass("active");
                $("#back_setting_active").removeClass("active");
            } else {
                $("#back_index_active").removeClass("active");
                $("#back_operate_active").removeClass("active");
                $("#back_order_active").removeClass("active");
                $("#back_charts_active").removeClass("active");
                $("#back_setting_active").addClass("active");
            }
        }

    </script>
</head>
<body>
<!-- Header -->
<!-- Main Navbar-->
<header class="header" th:fragment="common_header">
    <nav class="navbar">
        <div class="container-fluid">
            <div class="navbar-holder d-flex align-items-center justify-content-between">
                <!-- Navbar Header-->
                <div class="navbar-header">
                    <!-- Navbar Brand --><a href="/indexs" class="navbar-brand d-none d-sm-inline-block">
                    <div class="brand-text d-none d-lg-inline-block"><span>HotelManagement </span><strong> System</strong></div>
                    <div class="brand-text d-none d-sm-inline-block d-lg-none"><strong>BD</strong></div></a>
                    <!-- Toggle Button--><a id="toggle-btn" href="#" class="menu-btn active"><span></span><span></span><span></span></a>
                </div>
                <!-- Navbar Menu -->
                <ul class="nav-menu list-unstyled d-flex flex-md-row align-items-md-center">
                    <!-- 预定信息 铃铛-->
                    <li class="nav-item dropdown" id="replace_header_info"> <a id="notifications" rel="nofollow" data-target="#" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="nav-link"><i class="fa fa-bell-o"></i></a>
                        <ul aria-labelledby="notifications" class="dropdown-menu">
                            <!-- 稍详细的预定信息  -->
                            <li><a rel="nofollow" href="#" class="dropdown-item">
                                <div class="notification">
                                    <div class="notification-content"><i class="fa fa-envelope bg-green"></i>You have 6 new messages </div>
                                    <div class="notification-time"><small>4 minutes ago</small></div>
                                </div></a></li>
                            <!-- 残留信息 -->
                            <!--<li><a rel="nofollow" href="#" class="dropdown-item">
                                <div class="notification">
                                    <div class="notification-content"><i class="fa fa-twitter bg-blue"></i>You have 2 followers</div>
                                    <div class="notification-time"><small>4 minutes ago</small></div>
                                </div></a></li>
                            <li><a rel="nofollow" href="#" class="dropdown-item">
                                <div class="notification">
                                    <div class="notification-content"><i class="fa fa-upload bg-orange"></i>Server Rebooted</div>
                                    <div class="notification-time"><small>4 minutes ago</small></div>
                                </div></a></li>
                            <li><a rel="nofollow" href="#" class="dropdown-item">
                                <div class="notification">
                                    <div class="notification-content"><i class="fa fa-twitter bg-blue"></i>You have 2 followers</div>
                                    <div class="notification-time"><small>10 minutes ago</small></div>
                                </div></a></li>-->
                            <li><a rel="nofollow" href="#" class="dropdown-item all-notifications text-center"> <strong>view all notifications                                            </strong></a></li>
                        </ul>
                    </li>
                    <!-- 退出    -->
                    <li class="nav-item"><a href="/logout" class="nav-link logout"> <span class="d-none d-sm-inline">退出</span><i class="fa fa-sign-out"></i></a></li>
                </ul>
            </div>
        </div>
    </nav>
</header>

<!-- Side Navbar -->
<nav class="side-navbar" th:fragment="common_sidebar">
    <!-- Sidebar Header-->
    <div class="sidebar-header d-flex align-items-center">
        <div class="avatar"><img id="user_image" src="" alt="..." class="img-fluid rounded-circle"></div>
        <div class="title">
            <h1 class="h4" th:text="${#session.getAttribute('username')}">Mark Stephen</h1>
            <a id="check" class="btn btn-outline-primary" href="javascript:void (0);" style="width: 50px;height: 30px">签到</a>
        </div>
    </div>
    <!-- Sidebar Navidation Menus--><span class="heading">Main</span>
    <ul class="list-unstyled">
        <li id="back_index_active"><a href="/back_index" onclick="changeActive(1)"> <i class="icon-home"></i>Home </a></li>
        <li id="back_order_active"><a href="/back_order" onclick="changeActive(2)"> <i class="icon-grid"></i>查看预定 </a></li>
        <li id="back_operate_active"><a href="/back_operate" onclick="changeActive(3)"> <i class="icon-padnote"></i>房间操作 </a></li>
        <li id="back_charts_active"><a href="/back_charts" onclick="changeActive(4)"> <i class="fa fa-bar-chart"></i>营业信息 </a></li>
        <li id="back_setting_active"><a href="/systemsetting/user_level/showall?flagValue=''" onclick="changeActive(5)"> <i class="icon-interface-windows"></i>系统设置</a></li>
    </ul>
</nav>

<footer class="main-footer" th:fragment="common_footer">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-6">
                <p>Copyright &copy; 2019.Company GAMBLER.</p>
            </div>
            <div class="col-sm-6 text-right">
                <p></p>
                <!-- Please do not remove the backlink to us unless you support further theme's development at https://bootstrapious.com/donate. It is part of the license conditions. Thank you for understanding :)-->
            </div>
        </div>
    </div>
</footer>

<!-- reservations Modal -->
<div class="modal fade" id="new_reservations_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true" th:fragment="reservation_modal">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">新预定信息</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="notification_modal_replace">
                <div class="articles card">
                    <div class="card-body no-padding">
                            <a data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
                                <div class="item d-flex align-items-center" >
                                        <text>
                                            <h3 class="h5">预定信息</h3>
                                            <small> 详细预定信息 </small>
                                        </text>
                                </div>
                            </a>

                            <div class="collapse" id="collapseExample">
                                <div class="item d-flex align-items-center">
                                    <table class="table table-borderless table-hover">
                                        <thead>
                                        <tr>
                                            <th scope="col">#</th>
                                            <th scope="col">房间类型</th>
                                            <th scope="col">预定入住时间</th>
                                            <th scope="col">预定退房时间</th>
                                            <th scope="col">支付状态</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr>
                                            <th scope="row">1</th>
                                            <td>大床房</td>
                                            <td>Otto</td>
                                            <td>@mdo</td>
                                            <td>@mdo</td>
                                        </tr>
                                        <tr>
                                            <th scope="row">2</th>
                                            <td>Jacob</td>
                                            <td>Thornton</td>
                                            <td>@fat</td>
                                            <td>@mdo</td>
                                        </tr>
                                        <tr>
                                            <th scope="row">3</th>
                                            <td colspan="2">Larry the Bird</td>
                                            <td>@twitter</td>
                                            <td>@mdo</td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                    </div>
                </div>
                <div class="articles card">
                    <div class="card-body no-padding">
                        <a data-toggle="collapse" href="#collapseExample2" role="button" aria-expanded="false" aria-controls="collapseExample">
                            <div class="item d-flex align-items-center" >
                                <text>
                                    <h3 class="h5">预定信息</h3>
                                    <small> 详细预定信息 </small>
                                </text>
                            </div>
                        </a>

                        <div class="collapse" id="collapseExample2">
                            <div class="item d-flex align-items-center">
                                <table class="table table-borderless table-hover">
                                    <thead>
                                    <tr>
                                        <th scope="col">#</th>
                                        <th scope="col">First</th>
                                        <th scope="col">Last</th>
                                        <th scope="col">Handle</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <th scope="row">1</th>
                                        <td>Mark</td>
                                        <td>Otto</td>
                                        <td>@mdo</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">2</th>
                                        <td>Jacob</td>
                                        <td>Thornton</td>
                                        <td>@fat</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">3</th>
                                        <td colspan="2">Larry the Bird</td>
                                        <td>@twitter</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="change_all_leave_message_state()">已了解</button>
            </div>
        </div>
    </div>
</div>

</body>
</html>